<template>
    <div id="app">
        <el-card class="form-container">
            <div slot="header" class="form-header">
                <span class="form-title">提交数据</span>
            </div>
            
            <el-form 
                ref="form"
                :model="form" 
                :rules="rules" 
                label-width="100px"
                label-position="left"
                @submit.native.prevent="submitForm"
            >
                <el-form-item label="库名" prop="name">
                    <el-input 
                        v-model="form.name"
                        placeholder="请输入库名"
                        clearable
                        maxlength="20"
                        show-word-limit
                    ></el-input>
                </el-form-item>

                <el-form-item label="内容" prop="body">
                    <el-input
                        type="textarea"
                        v-model="form.body"
                        :rows="28"
                        placeholder="请输入详细内容"
                        maxlength="5000"
                        show-word-limit
                        resize="none"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button 
                        type="primary" 
                        native-type="submit"
                        :loading="loading"
                        class="submit-btn"
                    >
                        提交
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { addData } from "@/api/localserver/data";


export default {
    data() {
        return {
            form: {
                name: 'test',
                body: '{"documents": ["张三是男性"]}'
            },
            rules: {
                name: [
                    { required: true, message: '名称不能为空', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
                ],
                body: [
                    { required: true, message: '内容不能为空', trigger: 'blur' },
                    { min: 10, max: 5000, message: '内容长度在10到5000个字符', trigger: 'blur' }
                ]
            },
            loading: false
        }
    },
    methods: {
        submitForm() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loading = true
                    console.log("请求库名",this.form.name)
                    addData(this.form.name,this.form.body).then(res => {
                        console.log(res)
                    })
                    
                } else {
                    this.$message.warning('请正确填写数据')
                    return false
                }
            })
        }
    }
}
</script>
<style scoped>
    body {
        margin: 0;
        padding: 20px;
        background-color: #f5f7fa;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .form-container {
        margin:0 auto;
        margin-top: 100px;
        width: 70%;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    }

    .form-header {
        text-align: center;
    }

    .form-title {
        font-size: 24px;
        font-weight: 500;
        color: #303133;
    }

    .el-form {
        padding: 20px 40px;
    }

    .submit-btn {
        width: 100%;
        margin-top: 10px;
    }
</style>
